<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>其他设备</title>
    <link rel="stylesheet" href="../css/normalize.css"/>
    <link rel="stylesheet" href="../css/common.css"/>
    <link rel="stylesheet" href="../css/other.css"/>
</head>
<body class="theme">
<div id="app" v-cloak>
    <div id="header">
        <!-- 头部导航组件 -->
        <header-nav>

        </header-nav>
    </div>
    <section class="main outter-top clearfix auto">
        <!-- 左侧内容 -->
        <div class="left-side fl skin outter-right" id="left_side">
            <!-- 产用交互组件 -->
            <production-component></production-component>
            <!-- 主管压力放散组件 -->
            <pressure-component></pressure-component>
            <div class="gas">
                <div class="gas-title outter-top  outter-bottom clearfix">
                    <h2 class="common-title fl">
                        其他部门波动归因
                    </h2>
                    <ul class="gas-legend fl">

                    </ul>
                </div>
                <div class="gas-content skin2 border" id="gas_chart" >

                </div>
            </div>
        </div>
        <div class="main-contain skin fl">
            <ul class="main-list skin2  highlight-border clearfix">
                <li class="main-item main-item-border fl" v-for="(item,key,index) in PressureData">
                    <div class="main-item-data main-item-data-border  main-item-normal">
                        <h3 class="main-item-data-title inner-top outter-left">{{nameList[index]}}</h3>
                        <div class="main-item-data-content outter-align clearfix">
                            <p class="fl main-item-data-current">当前用气量 <br/><span class="current-data">{{item.current|formatterVal|keepOne}}</span></p>
                            <p class="fl main-item-data-prediction">预计用气量 <br/><span class="prediction-data">{{gasData[gasArr[index]]|formatterVal|keepOne|orNaN}}</span></p>
                            <p class="fl unit"><span>X10³m³/h</span></p>
                        </div>
                    </div>
                    <div class="main-item-chart" :id="statusChartId[index]"></div>
                </li>
            </ul>
            <div id="main_content">
                <message-center :msg="msgCenter" :srcdata = "srcline"></message-center>
            </div>
        </div>
    </section>
</div>
</body>
<script src="../js/lib/jquery-1.11.0.min.js"></script>
<script src="../js/lib/echarts.min.js"></script>
<script src="../js/lib/vue.min.js"></script>
<script src="../js/lib/elementUi.js"></script>
<script src="../js/lib/vue-resource.js"></script>
<script src="../js/data.js"></script>
<script src="../js/base.js"></script>
<script src="../js/chart.js"></script>
<script src="../js/components.js"></script>
<script src="../js/common.js"></script>
<script src="../js/other.js"></script>
</html>